<template>
    <h2>个人设置页</h2>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px">
        <el-form-item label="头像">
            <el-upload  drag :show-file-list="true" :http-request="avatarUpload">
                <el-image :src="userInfo.avatarUrl" class="avatar" />
            </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="ruleForm.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-radio-group v-model="ruleForm.gender">
                <el-radio-button label="保密" />
                <el-radio-button label="男" />
                <el-radio-button label="女" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="生日">
            <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择生日" />
        </el-form-item>
        <el-form-item>
            <el-input type="textarea" :rows="10" v-model="ruleForm.signature" placeholder="请输入个人描述..."></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { userDetailInterface, countriesListInterface, } from '@/api/user'
import { mapState } from 'vuex'
import { getBase64 } from '@/utils/base64'
export default {
    data() {
        return {
            ruleForm: {
                nickname: '',
                gender: '保密',
                birthday: '',
                signature: ''
            }
        }
    },
    computed: {
        ...mapState('userInfoModule', ['userInfo', 'loginStatus'])
    },
    methods: {
        // 更新用户信息
        userUpdate() {
            userUpdateInterface().then(res => {
                console.log(res);
            })
        },

        // 获取国家id列表
        getCountriesList() {
            countriesListInterface().then(res => console.log(res))
        },
        // 上传头像接口
        avatarUpload(fileData) {
            getBase64(fileData.file).then(() => {
                avatarUploadInterface({ imgFile: fileData }).then(res => {
                    console.log(res.data.data.url);
                })
            });
            // var formData = new FormData()
            // formData.append('imgFile',  URL.createObjectURL(fileData.file))

        },
        // 获取用户详情
        getUserDetailInfo(uid) {
            userDetailInterface({ uid }).then(res => {
                console.log(res.profile);
                this.ruleForm.nickname = res.profile.nickname;
                this.ruleForm.gender = res.profile.gender === 1 ? '男' : '女';
                this.ruleForm.birthday = new Date(res.profile.birthday);
                this.ruleForm.signature = res.profile.signature;
            })

        }
    },
    created() {

        this.getUserDetailInfo(this.userInfo.userId)
    }
}
</script>

<style lang="scss" scoped>
.avatar {
    height: 200px;
    object-fit: contain;
}
</style>
